<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>5G智能时代介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/echarts.js}"></script>

</head>

<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <blockquote class="text-warning" style="font-size:14px">
            <h1>欢迎使用【5G智能时代】 今日交易笔数：<label id="tradeCount"></label> 今日交易金额：<label id="tradeAmount"></label></h1>

        </blockquote>
        <hr>
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:450px;"></div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/echarts.js}"></script>
<script type="text/javascript">
    var prefix = ctx + "system/echars";

    $(document).ready(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var names = [];    //横坐标数组（实际用来盛放X轴坐标值）
        var values = [];    //纵坐标数组（实际用来盛放Y坐标值）
        var tradeCount = [];
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: prefix + "/EcharsShow",    //请求发送到dataActiont处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象

                if (result) {
                    $("#tradeCount").text(result[0].tradeCount)
                    $("#tradeAmount").text(parseFormatNum(result[0].tradeAmount, 2))

                    for (var i = 6; i >-1; i--) {
                        names.push(result[i].tradeTime);
                        values.push(result[i].tradeAmount);
                        tradeCount.push(result[i].tradeCount);
                    }

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        tooltip: {},
                        legend: {
                            data: ['总交易额', '交易笔数']
                        },
                        xAxis: {
                            data: names
                        },
                        yAxis: [{
                            type: 'value'
                        },
                            {
                                type: 'value',

                            }

                        ],
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '总交易额',
                            type: 'bar',
                            data: values
                        },
                            {
                                name: '交易笔数',
                                type: 'line',
                                yAxisIndex: 1,
                                itemStyle: {  /*设置折线颜色*/
                                    normal: {
                                        width: 20,
                                        color: '#c5ee4a'
                                    }
                                },
                                data: tradeCount
                            }


                        ]
                    })
                    ;
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    });

    function parseFormatNum(number, n) {

        if (n != 0) {
            n = (n > 0 && n <= 20) ? n : 2;
        }
        number = parseFloat((number + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
        var sub_val = number.split(".")[0].split("").reverse();
        var sub_xs = number.split(".")[1];
        var show_html = "";
        for (i = 0; i < sub_val.length; i++) {
            show_html += sub_val[i] + ((i + 1) % 3 == 0 && (i + 1) != sub_val.length ? "," : "");
        }
        if (n == 0) {
            return show_html.split("").reverse().join("");
        } else {
            return show_html.split("").reverse().join("") + "." + sub_xs;
        }
    }

</script>
</body>
</html>
